<template>
  <!-- 逻辑：在这个页面获取数据，通过props传参的方式给各个组件传参 -->
  <div class="report">
    <tableTool>
      <div slot="export">
        <el-button type="primary" @click="excelExport">导出</el-button>
      </div>
      <div class="tool-form" slot="form">
        <div class="input-group">
          <span class="lable">机构名称：</span>
          <el-input placeholder="请输入" v-model="filterOrgName" />
        </div>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="success" @click="onReset">重置</el-button>
      </div>
    </tableTool>
    <customTable :list="list" :combined="combined">
      <template v-slot:title>
        <tr>
          <th colspan="17">集团层</th>
        </tr>
        <tr>
          <th rowspan="2">机构名称</th>
          <th colspan="2">累计使用</th>
          <th colspan="2">工程消耗</th>
          <th colspan="2">自行施工</th>
          <th colspan="2">机械消耗</th>
          <th colspan="2">研发支出</th>
          <th colspan="2">安全环保支出</th>
          <th colspan="2">分包扣款</th>
          <th colspan="2">销售消耗</th>
        </tr>
        <tr>
          <th>数量</th>
          <th>金额</th>
          <th>数量</th>
          <th>金额</th>
          <th>数量</th>
          <th>金额</th>
          <th>数量</th>
          <th>金额</th>
          <th>数量</th>
          <th>金额</th>
          <th>数量</th>
          <th>金额</th>
          <th>数量</th>
          <th>金额</th>
          <th>数量</th>
          <th>金额</th>
        </tr>
      </template>
      <template #body="{ list }">
        <tr v-for="item in list" :key="item.id">
          <td class="link">
            <span @click="
              toJump(item.orgId, item.orgName, item.direct)
            ">{{ item.orgName }}</span>
          </td>
          <td>{{ item.totalQuantity }}</td>
          <td>{{ item.totalAmount }}</td>
          <td>{{ item.projectQuantity }}</td>
          <td>{{ item.projectAmount }}</td>
          <td>{{ item.selfQuantity }}</td>
          <td>{{ item.selfAmount }}</td>
          <td>{{ item.mechanicsQuantity }}</td>
          <td>{{ item.mechanicsAmount }}</td>
          <td>{{ item.developQuantity }}</td>
          <td>{{ item.developAmount }}</td>
          <td>{{ item.securityQuantity }}</td>
          <td>{{ item.securityAmount }}</td>
          <td>{{ item.subpackageQuantity }}</td>
          <td>{{ item.subpackageAmount }}</td>
          <td>{{ item.saleQuantity }}</td>
          <td>{{ item.saleAmount }}</td>
        </tr>
      </template>
      <template #empty>
        <tr>
          <td colspan="17" class="empty">暂无数据</td>
        </tr>
      </template>
      <template #footer="{ combined }">
        <tr>
          <td>合计</td>
          <td>{{ combined.totalQuantity }}</td>
          <td>{{ combined.totalAmount }}</td>
          <td>{{ combined.projectQuantity }}</td>
          <td>{{ combined.projectAmount }}</td>
          <td>{{ combined.selfQuantity }}</td>
          <td>{{ combined.selfAmount }}</td>
          <td>{{ combined.mechanicsQuantity }}</td>
          <td>{{ combined.mechanicsAmount }}</td>
          <td>{{ combined.developQuantity }}</td>
          <td>{{ combined.developAmount }}</td>
          <td>{{ combined.securityQuantity }}</td>
          <td>{{ combined.securityAmount }}</td>
          <td>{{ combined.subpackageQuantity }}</td>
          <td>{{ combined.subpackageAmount }}</td>
          <td>{{ combined.saleQuantity }}</td>
          <td>{{ combined.saleAmount }}</td>
        </tr>
      </template>
    </customTable>
    <pagination @onCurrentChange="handleCurrentChange" :total="page.total"></pagination>
  </div>
</template>
<script>
import tableTool from '../components/tableTool.vue'
import customTable from '../components/customTable.vue'
import pagination from '../components/pagination.vue'
import { combinedFn } from '@/pages/comprehensiveReport/equipmentManagement/mixin'
import request from '@/api/comprehensiveReport/equipmentManagement.js'
export default {
  name: 'equipmentConstructionCostTable',
  components: { tableTool, customTable, pagination },
  data () {
    return {
      list: [],
      page: {
        total: 0,
        currentPage: 1,
        limit: 10,
      },
      combined: {},
      headers: {
        // 定义对应关系- 把英文的key转化成中文的key所对应的值
        机构名称: 'orgName',
        数量: 'totalQuantity',
        金额: 'totalAmount',
        数量1: 'projectQuantity',
        金额1: 'projectAmount',
        数量2: 'selfQuantity',
        金额2: 'selfAmount',
        数量3: 'mechanicsQuantity',
        金额3: 'mechanicsAmount',
        数量4: 'developQuantity',
        金额4: 'developAmount',
        数量5: 'securityQuantity',
        金额5: 'securityAmount',
        数量6: 'subpackageQuantity',
        金额6: 'subpackageAmount',
        数量7: 'saleQuantity',
        金额7: 'saleAmount',
      },
      filterOrgName: ''
    }
  },
  created () {
    const orgType = this.$store.state.userInfo.orgInfo.orgType;
    const orgTypes = {
      2: "/equipmentConstructionCostTableFiliale", // 分子公司
      5: "/equipmentConstructionCostTableProject", // 项目部
    };
    if (Object.keys(orgTypes).includes(orgType.toString())) {
      this.$router.replace(orgTypes[orgType.toString()]);
    } else {
      this.getList()
    }
  },
  methods: {
    onSearch () {
      this.getList()
    },
    onReset () {
      this.filterOrgName = ''
      this.getList()
    },
    async getList () {
      // 携带参数：currentPage(当前页)，limit(每页显示多少条)
      const data = await request.getEquipmentConstructionCost({
        page: this.page.currentPage,
        limit: this.page.limit,
        orgId: localStorage.orgId,
        type: 1,
        filterOrgName: this.filterOrgName
      })
      console.log('发送请求，获取数据', data)
      if (data.list.length == 0) {
        this.list = []
        this.combined = {}
        this.page.total = 0
        return;
      }
      this.page.total = data.totalCount
      const { list, combined } = combinedFn(Object.values(this.headers).slice(1), data.list, [
        'totalQuantity',
        'totalAmount',
        'projectQuantity',
        'projectAmount',
        'selfQuantity',
        'selfAmount',
        'mechanicsQuantity',
        'mechanicsAmount',
        'developQuantity',
        'developAmount',
        'securityQuantity',
        'securityAmount',
        'subpackageQuantity',
        'subpackageAmount',
        'saleQuantity',
        'saleAmount',
      ])
      this.list = list
      this.combined = combined
    },
    handleCurrentChange (currentPage) {
      this.page.currentPage = currentPage
      this.getList()
    },
    toJump (orgId, orgName, direct) {
      // 根据后端传回的 direct 判断进入分子公司还是项目层 1 进分子公司，0 进项目层
      const path = direct === 1 ? '/equipmentConstructionCostTableFiliale' : '/equipmentConstructionCostTableProject'
      this.$router.push({
        path,
        query: {
          orgId,
          orgName,
        },
      })
    },
    excelExport () {
      const multiHeader = [
        ['集团层', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
        [
          '机构名称',
          '累计使用',
          '',
          '工程消耗',
          '',
          '自行施工',
          '',
          '机械消耗',
          '',
          '研发支出',
          '',
          '安全环保支出',
          '',
          '分包扣款',
          '',
          '销售消耗',
          '',
        ],
      ] // 它是一个二维数组
      const merges = ['A1:Q1', 'B2:C2', 'D2:E2', 'F2:G2', 'H2:I2', 'J2:K2', 'L2:M2', 'N2:O2', 'P2:Q2', 'A2:A3']
      // 懒加载 script-loader
      import('@/utils/Export2Excel.js').then(async (excel) => {
        // 获取所有的数据
        const { list } = await request.getEquipmentConstructionCost({
          page: 1,
          limit: this.page.total,
          orgId: localStorage.orgId,
          type: 1,
        })
        // list就是所有的数据，list [{},{},{}] 转换为 => [[],[],[],[]]
        const data = this.formatJson(this.headers, list) // 转化数据表结构
        const { combined } = combinedFn(Object.values(this.headers).slice(1), list, [
          'totalQuantity',
          'totalAmount',
          'projectQuantity',
          'projectAmount',
          'selfQuantity',
          'selfAmount',
          'mechanicsQuantity',
          'mechanicsAmount',
          'developQuantity',
          'developAmount',
          'securityQuantity',
          'securityAmount',
          'subpackageQuantity',
          'subpackageAmount',
          'saleQuantity',
          'saleAmount',
        ])
        data.push(['合计', ...Object.values(combined)])
        excel.export_json_to_excel({
          header: [
            '',
            '数量',
            '金额',
            '数量',
            '金额',
            '数量',
            '金额',
            '数量',
            '金额',
            '数量',
            '金额',
            '数量',
            '金额',
            '数量',
            '金额',
            '数量',
            '金额',
          ],
          data,
          filename: '设备管理-设备施工费用统计表-集团层',
          autoWidth: true,
          bookType: 'xlsx',
          multiHeader,
          merges,
        })
      })
    },
    formatJson (headers, list) {
      return list.map((item) => {
        return Object.values(headers).map((value) => {
          return item[value]
        })
      })
    },
  },
}
</script>
<style lang="scss">

</style>
